import styled from 'styled-components';
import xStudio from '@/assets/img/xStudio.png';
import xStudioHover from '@/assets/img/xStudioHover.png';
import aiLogo from '@/assets/img/aiLogo.png';
import aiLogoHover from '@/assets/img/aiLogoHover.png';
import cloudSong from '@/assets/img/cloudSong.png';
import cloudSongHover from '@/assets/img/cloudSongHover.png';

export const AppfooterWrapper = styled.div`
  position: relative;
  height: 325px;
  overflow: hidden;
  border-top: 1px solid rgb(211, 211, 211);
  background: rgb(242, 242, 242);
  display: flex;
`;

export const AppfooterContentWrapper = styled.div`
  height: 231px;
  margin: 36px auto !important;
  .enters {
    height: 71px;
    display: flex;
    margin-left: 70px;
    .enter {
      width: 45px;
      margin-right: 70px;
    }
    a {
      display: inline-block;
      width: 45px;
      height: 45px;
      background-size: 220px 220px;
      margin-left: 27px;
    }
    span {
      display: inline-block;
      width: 100px;
      text-align: center;
      margin-top: 10px;
      color: rgba(0, 0, 0, 0.5);
    }
    .icon_1 {
      background-position: -170px -5px;
      &:hover {
        background-position: -5px -115px;
      }
    }
    .icon_2 {
      background-position: -5px -170px;
      &:hover {
        background-position: -60px -170px;
      }
    }
    .icon_3 {
      background-image: url(${xStudio});
      background-size: 45px;
      &:hover {
        background-image: url(${xStudioHover});
      }
    }
    .icon_4 {
      background-position: -60px -60px;
      &:hover {
        background-position: -115px -5px;
      }
    }
    .icon_5 {
      background-image: url(${aiLogo});
      background-size: 45px;
      &:hover {
        background-image: url(${aiLogoHover});
      }
    }
    .icon_6 {
      background-image: url(${cloudSong});
      background-size: 45px;
      &:hover {
        background-image: url(${cloudSongHover});
      }
    }
    .icon_7 {
      &:hover {
        background-position: -60px -115px;
      }
      background-position: -170px -115px;
    }
  }
  .copy {
    margin-top: 70px;
    text-align: center;
    span {
      color: #666666;
    }
    > p {
      margin-bottom: 10px;
    }
    .link {
      a {
        color: #666;
      }
      span {
        color: #d9d9d9;
        margin: 0 10px 0 10px;
      }
    }
    .en_right {
      span {
        margin-left: 10px;
      }
    }
  }
`;
